<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="jay">发如雪</li>
        <li>东风破</li>
        <li>黑色毛衣</li>
        <li>双截棍</li>
    </ul>
    <script>
    /*
      ul.childNodes  获取元素的子元素。
      这些子元素有文本节点，有元素节点。

      ul.childern  获取元素的子节点，子节点中只有元素节点
      结果都可以当作数组看待。

      节点：网页中的所有内容都是节点
           (标签、属性、文本、注释等)，DOM中使用node表示 
    */
    var jay = document.querySelector('#jay');
    // 获取父节点
    console.log(jay.parentNode);
    var ul = document.querySelector('ul');
    console.log(ul);
    console.log('---------------------------------------');
    console.log(ul.childNodes);
    // 结果可以当作数组看待
    console.log(ul.childNodes[0]);
    console.log(ul.childNodes[1]);

    console.log('**************************************');
    console.log(ul.children);
    console.log(ul.children[0]);
    console.log(ul.children[1]);

      /*
            第一个儿子：
                    nodeName: "#text"
                    nodeType: 3
                    nodeValue: "\n"

            如何只选取元素节点呢?
                可以通过 for 循环， 对 nodeType 判断即可。
        */
    </script>
</body>
</html>